<template>
<<<<<<< HEAD
	<view class="content">
=======
	
	<view class="content">
		
>>>>>>> 7f79071be3a32d84b28d388f9f0b60410b6077b8
			<view class="container">
				<!-- 输入框 -->
				<textarea placeholder="想说什么就说什么叭- -" @blur="inputBlur" :focus="inputFocus" :auto-height="true"
					:show-confirm-bar="false" maxlength="1500" v-model="form.content" class="post-txt"></textarea>
	
				<!-- 上传图片or视频 -->
				<view class="img-list">
					<view v-for="(item,index) in form.imageList" :key='index' class="img-list-box">
						<image v-if="!form.video" :src="item" class="img-item" @tap="imgTypeSelect(item)"></image>
						<video v-else :src="item" @longpress="videoTypeSelect(item)"></video>
					</view>
					<view v-if="form.imageList.length < 9 && !form.video" class="icon-camera" @tap="selectType">
						<uni-icons type="camera-filled" size="27" color=#D3D4D6></uni-icons>
					</view>
				</view>
	
				<!-- 选择位置 -->
				<view @click="chooseLocation" class="choose-location">
					<u-icon name="map" size="30rpx"></u-icon>
					<text class="txt">{{ form.address || '你在哪里?' }}</text>
				</view>
			</view>
			<!-- 选择板块 -->
	
			<!-- 底部确定按钮 -->
			<view @click="clickCreate" class="yue-base-button">
				<view>确定发布~</view>
			</view>
		</view>
</template>

<script>
	
	export default {
		data() {
			return {
				// 默认输入框获得焦点
				inputFocus: true,
				form: {
					content: '',
					address: '',
					imageList: [],
					video: '',
				},		
			}
		},

		methods: {
			// 选择媒体类型
			selectType() {
				let that = this
				let itemL = that.form.imageList.length!=0 ? !that.form.imageList.video ? ['拍照', '从相册选择照片']: '' : ['拍照', '从相册选择照片', '从相册选择视频']
				uni.showActionSheet({
					itemList: itemL,
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								sourceType: ['camera'], // 拍照选择
								success: function(res) {
									that.form.imageList.push(res.tempFilePaths)
								}
							});
						}
						if (res.tapIndex == 1) {
							uni.chooseImage({
								count: 9 - that.form.imageList.length,
								sourceType: ['album'], //从相册选择
								success: function(res) {
									res.tempFilePaths.forEach(path => {
										that.form.imageList.push(path);
										// 发给oss 待写
									})
								}
							});
						}
						if (res.tapIndex == 2) {
							uni.chooseVideo({
								sourceType: ['album'], // 从相册选择视频
								success: function(res) {
									if (res.size > 20971520) {
										uni.showToast({
											title: "视频文件过大",
											duration: 2000
										});
										return;
									}
									that.form.video = true;
									that.form.imageList.push(res.tempFilePath)
								}
							});
						}
					}
				});
			},

			// 图片状态选择
			imgTypeSelect(item) {
				let that = this
				uni.showActionSheet({
					itemList: ['预览', '删除'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.previewImage({
								current: item,
								urls: that.form.imageList
							})
						}
						if (res.tapIndex == 1) {
							let index = that.form.imageList.findIndex(url => url === item);
							if (index !== -1) {
								that.form.imageList.splice(index, 1);
							}
						}
					}
				});
			},
<<<<<<< HEAD
			
			// 视频状态选择
			videoTypeSelect(){
				uni.showActionSheet({
					itemList: ['删除'],
					success: function(res) {
						if (res.tapIndex == 0) {
							let index = that.form.imageList.findIndex(url => url === item);
							if (index !== -1) {
								that.form.imageList.splice(index, 1);
							}
						}
					}
				});
			},

			// 文字内容
			inputBlur(event) {
				this.inputCursor = event.detail.cursor;
				this.inputFocus = false;
			},

			// 位置选择
			chooseLocation() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						that.form.address = res.name;
					}
				});
=======
			
			// 视频状态选择
			videoTypeSelect(){
				uni.showActionSheet({
					itemList: ['删除'],
					success: function(res) {
						if (res.tapIndex == 0) {
							let index = that.form.imageList.findIndex(url => url === item);
							if (index !== -1) {
								that.form.imageList.splice(index, 1);
							}
						}
					}
				});
			},

			// 文字内容
			inputBlur(event) {
				this.inputCursor = event.detail.cursor;
				this.inputFocus = false;
			},

			// 位置选择
			// chooseLocation() {
			// 	let that = this;
			// 	uni.chooseLocation({
			// 		success: function(res) {
			// 			that.form.address = res.name;
			// 		}
			// 	});
			// },
			
			chooseLocation() {
			  let that = this;
			  uni.chooseLocation({
			    success: function(res) {
			      // 使用腾讯地图的地理编码服务将位置名称转换为经纬度
			      const geocoder = new qq.maps.Geocoder({
			        complete: function(result) {
			          if (result.status === qq.maps.ServiceResultStatus.OK) {
			            const location = result.detail.location; // 包含经纬度信息
			            that.form.address = res.name; // 更新表单地址
			            that.latitude = location.lat; // 更新地图组件的 latitude
			            that.longitude = location.lng; // 更新地图组件的 longitude
			          } else {
			            console.error("Geocoder error:", result);
			          }
			        }
			      });
			      geocoder.getLocation(res.name);
			    }
			  });
>>>>>>> 7f79071be3a32d84b28d388f9f0b60410b6077b8
			},

			// 发布
			clickCreate() {
				console.log(this.form);
				if (!this.form.content) {
					uni.showToast({
						title: "请输入内容噢",
						icon: "error"
					})
					return;
				}
				this.$request.post("/api/article/save", {
					"type": 1,
					"content": this.form.content,
				}).then((res) => {
					if (res.message == '保存成功') {
						uni.showToast({
							title: '发布成功',
							duration: 1500,
							mask: true
						});
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/community/community'
							});
						}, 1500)
					}
				})
			},
		}
	}
</script>


<style lang="scss" scoped>
	.content {
		height: 100vh;
		background-color: #FFFFFF;
		border-radius: 30upx 30upx 0upx 0upx;
	}

	.container {
		margin-top: 20px;
		padding: 20rpx 40rpx;
		overflow: hidden;
	}

	.post-txt {
<<<<<<< HEAD
		width: 100%;
		min-height: 300rpx;
		line-height: 1rpx;
=======
		//height: auto;
		bottom: 0;
		width: 100%;
		min-height: 300rpx;
		line-height: 1.5;
>>>>>>> 7f79071be3a32d84b28d388f9f0b60410b6077b8
	}

	/* 选择位置 */
	.choose-location {
		display: inline-flex;
		align-items: center;
		background-color: #eee;
		font-size: 28rpx;
		border-radius: 100rpx;
		padding: 10rpx 20rpx;
		margin-left: 5rpx;
		line-height: 1;
		color: #616161;

		.txt {
			margin-left: 10rpx;
		}
	}

	.yue-base-button {
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: 0;
		width: 100%;
		padding: 40rpx 0;
		z-index: 3;
	}

	.yue-base-button view {
		width: 560rpx;
		text-align: center;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 96rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
		background: #07C062;
	}

	// 相机icon
	.icon-camera {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 210rpx;
		height: 210rpx;
		border-radius: 6rpx;
		margin: 5rpx 0rpx 0rpx 5rpx;
		background-color: #f4f5f7;
	}

	// 媒体列表
	.img-list {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}

	.img-list-box {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.img-item {
		width: 210rpx;
		height: 210rpx;
		margin: 5rpx;
		border-radius: 6rpx
	}
</style>


